<template>
	<div>

		<div class="action-wrap">
			<el-tabs v-model="type" @tab-click="findBanners">
				<el-tab-pane v-for="(item, index) in bannerTypes" :key="index" :label="item.name" :name="item.code"></el-tab-pane>
			</el-tabs>
			<el-button style="margin-bottom: 20px;" type="primary" size="small" icon="el-icon-plus" @click="openBannerForm(false)">添加{{bannerType}}</el-button>
		</div>
		<!-- 轮播图列表 -->
		<el-table :data="banners" v-loading="loading">
			<el-table-column label="图片" align="center">
				<template slot-scope="scope">
					<el-image :src="scope.row.pictureUrl" fit="cover" :preview-src-list="urls"></el-image>
				</template>
			</el-table-column>
			<el-table-column v-if="type == 'category'" label="商品类别" prop="categoryName" align="center"></el-table-column>
			<el-table-column label="链接类型" :formatter="row => row.linkMode == 0 ? '内链' : '外链'" align="center"></el-table-column>
			<el-table-column label="链接地址" :formatter="row => row.linkMode == 0 ? row.goodsName : row.linkUrl" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-switch :value="scope.row.status" :active-value="0" :inactive-value="1" @change="updateStatus(scope.row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="openBannerForm(scope.row)">修改</el-button>
					<el-button type="text" size="small" icon="el-icon-delete" @click="deleteBanner(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label="排序" align="center">
				<template slot-scope="scope">
					<div class="btn-sort-wrap">
						<el-button type="text" size="small" icon="el-icon-arrow-up" @click="sort(scope.row.id, 1)" title="上移"></el-button>
						<el-button type="text" size="small" icon="el-icon-arrow-down" @click="sort(scope.row.id, 0)" title="下移"></el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 轮播图表单 -->
		<el-dialog :title="`${bannerForm.id ? '编辑' : '添加'}${bannerType}`" :visible.sync="showBannerForm" width="30vw">
			<el-form label-width="80px">
				<image-uploader 
					:imageUrl.sync="bannerForm.pictureUrl"
					uploadUrl="/banner/uploadImage"
					:type="type">
				</image-uploader>
				
				<el-form-item label="商品类别" v-if="type == 'category' && !categoryLoading">
					<el-cascader v-model="bannerForm.categoryId" :props="categoryProps" placeholder="选择商品类别"></el-cascader>
				</el-form-item>
				<el-form-item label="链接类型">
					<el-radio-group v-model="bannerForm.linkMode">
						<el-radio :label="0">内链</el-radio>
						<el-radio :label="1">外链</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="链接商品" v-if="bannerForm.linkMode == 0">
					<el-select v-model="bannerForm.goods" filterable remote placeholder="请输入商品名称" :remote-method="searchGoods"
					 :loading="goodsLoading" value-key="id">
						<el-option v-for="item in goodses" :key="item.id" :label="item.name" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="链接地址" v-else>
					<el-input v-model="bannerForm.linkUrl" placeholder="如：https://www.mi.com"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="showBannerForm = false">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				bannerTypes: [{
						name: '轮播图',
						code: 'slide'
					},
					{
						name: '商品推销',
						code: 'promo'
					},
					{
						name: '商品横幅',
						code: 'advert'
					},
					{
						name: '类别广告',
						code: 'category'
					}
				],
				type: 'slide',
				banners: [],
				loading: false,
				bannerForm: {
					pictureUrl: '',
					linkMode: 0,
					linkUrl: '',
					goods: {},
					remark: '',
					categoryId: ''
				},
				showBannerForm: false,
				goodsLoading: false,
				goodses: [],
				categoryProps: {
					lazy: true,
					expandTrigger: 'hover',
					lazyLoad: (node, resolve) => {
						this.$util.request('/category', {
							parentId: node.root ? 0 : node.value
						}, (res) => {
							res = res.map(e => {
								return {
									label: e.name,
									value: e.id,
									leaf: !node.root
								}
							});
							resolve(res);
						}, true);
					}
				},
				categoryLoading: false
			}
		},
		computed: {
			urls() {
				return this.banners.map(e => e.pictureUrl);
			},
			bannerType() {
				return this.bannerTypes.filter(e => e.code == this.type)[0].name;
			}
		},
		created() {
			this.findBanners();
		},
		watch: {
			showBannerForm(e) {
				if (!e) {
					this.bannerForm = {
						pictureUrl: '',
						linkMode: 0,
						linkUrl: '',
						goods: {},
						remark: ''
					};
				}
			}
		},
		methods: {
			findBanners() {
				this.loading = true;
				this.$util.request('/banner', {
					type: this.type
				}, (res) => {
					this.loading = false;
					this.banners = res;
				}, true);
			},
			updateStatus(item) {
				this.$util.requestWithConfirm(`确定${item.status == 0 ? '下架' : '上架'}该轮播图吗？`, '/banner/updateStatus', {
					id: item.id
				}).then(_ => {
					this.findBanners();
				});
			},
			deleteBanner(id) {
				this.$util.requestWithConfirm(`确定删除该轮播图吗？`, '/banner/delete', {
					id
				}).then(_ => {
					this.findBanners();
				});
			},
			openBannerForm(item) {
				if (item) {
					const {
						id,
						pictureUrl,
						linkMode
					} = item;
					const data = {
						id,
						pictureUrl,
						linkMode
					};
					if (item.linkMode == 0) {
						this.bannerForm = Object.assign(data, {
							goods: {
								id: item.goodsId,
								name: item.goodsName
							}
						});

						// 主动搜索对应商品
						this.searchGoods(item.goodsName);
					} else {
						this.bannerForm = Object.assign(data, {
							linkUrl: item.linkUrl
						});
					}
					if (item.type == 'category') {
						// 查询类别的父类别id
						this.categoryLoading = true;
						this.$util.request('/category/parentId', {
							id: item.categoryId
						}, (parentId) => {
							this.bannerForm.categoryId = [parentId, item.categoryId];
							this.categoryLoading = false;
						}, true);
					}
				}
				this.showBannerForm = true;
			},
			onUploaded(res) {
				this.uploadLoading.close();

				if (res.state == 'ok') {
					this.bannerForm.pictureUrl = res.url;
				} else {
					this.$util.msg(res.msg);
				}
			},
			searchGoods(keyword) {
				this.goodsLoading = true;
				this.$util.request('/goods/assist', {
					keyword
				}, (res) => {
					this.goodsLoading = false;
					this.goodses = res;
				}, true);
			},
			submitForm() {
				if (!this.bannerForm.pictureUrl) return this.$util.msg('请选择图片');
				if (this.type == 'category' && !this.bannerForm.categoryId) {
					return this.$util.msg('请选择商品类别');
				}
				if (this.bannerForm.linkMode == 0 && !this.bannerForm.goods.id) {
					return this.$util.msg('请选择要链接的商品');
				}
				if (this.bannerForm.linkMode == 1 && !this.bannerForm.linkUrl) {
					return this.$util.msg('请输入外链地址');
				}

				const data = Object.assign({
					type: this.type
				}, this.bannerForm);
				if (this.bannerForm.linkMode == 0) {
					data.goodsId = data.goods.id;
					data.goodsName = data.goods.name;
				} else {
					data.goodsId = '';
				}
				// 查询类别名称
				if (this.type == 'category') data.categoryId = data.categoryId[1];
				// 去除goods对象
				delete data.goods;
				this.$util.requestWithConfirm('确定提交吗？', `/banner/${data.id ? 'update' : 'save'}`, data).then(_ => {
					this.showBannerForm = false;
					this.findBanners();
				});
			},
			sort(id, direction) {
				this.loading = true;
				this.$util.request('/banner/sort', {
					id,
					direction
				}, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						this.findBanners();
					} else {
						this.$util.msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.action-wrap {
		@extend %flex-align-center;

		.el-tabs {
			flex: 1;
			margin-right: 30px;
		}
	}
</style>
